<template>
    <div>
        <h1 class="page-header">{{jsondata.title}}</h1>
        <ul class="list-group">
            <li class="list-group-item" v-for="(item,index) in jsondata.subjects" :key="index">
                <span class="badge">{{item.rating.average}}</span>
                <div class="media-left">
                    <router-link :to="{path:'/detail/'+item.id}">
                        <img class="media-object" :src="item.images.small" alt="">
                    </router-link>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">{{item.title}}</h3>
                    <p>
                        <span>类型：</span><span>{{item.genres.join('、')}}</span>
                    </p>
                    <p>
                        <span>导演：</span> <span v-for="(val,index) in item.casts" :key="index">{{val.name + (index==item.casts.length-1?'':'、')}}</span>
                    </p>
                </div>
            </li>
        </ul>
        <!-- 分页 -->
        <div class="paging">
            <el-pagination :total="total" :page-size="pagesize" show-total @current-change="request" style="margin-bottom:15px;"></el-pagination>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import jsonp from "../../http/jsonp.js";
export default {
  created() {
    this.request();
  },
  data() {
    return {
      currentPage: 0,
      jsondata: {},
      countPage: 0,
      total: 15,
      pagesize: 5
    };
  },
  methods: {
    request() {
      jsonp(
        "https://api.douban.com/v2/movie/in_theaters",
        { count: 10, start: this.currentPage },
        function(data) {
          this.jsondata = data;
          this.total = data.total;
          this.pagesize = data.count;
        }.bind(this)
      );
    }
  },
  watch: {},
  mounted() {
    this.request();
  }
};
</script>
<style scoped>
.paging {
  margin-top: 15px;
  padding-right: 15px;
  text-align: right;
}
</style>